<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <script src="./../lib/consoleNoRequire.js"></script>
    <script src="./"></script>
</head>
<body>

<style>
    html,body{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
    }
    .warpper{
        background: -webkit-linear-gradient(white,black);
        height:200%;
    }

</style>

<div class="warpper">


</div>

<script>


    var scrollArea = document.querySelector('.warpper');
    var startX,startY;

    scrollArea.addEventListener('touchstart',function(e){
        //console.log('touchstart');
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
    },false);

    scrollArea.addEventListener('touchmove',function(e){
        //console.log('touchmove');
        debugger;
        var x = e.touches[0].pageX;
        //console.log("pageX:" + x);

        var y = e.touches[0].pageY;
        console.log("pageY:" + y);
        //e.preventDefault();

    },false);

    scrollArea.addEventListener('touchend',function(e){
        //console.log('touchend');

    },false);

    scrollArea.addEventListener('touchcancel',function(e){
        //console.log('touchcancel');

    },false);


</script>


</body>
</html>
